import React from 'react'
import './index.less'
//引入封装的格式化时间
import Units from '../../utils/utils'
import fetchJsonp from 'fetch-jsonp'
import { Row, Col } from 'antd';


class Header extends React.Component {
    componentWillMount() {
        this.setState({
            username: '婳婳的书'
        })

        setInterval(() => {
            let sysTime = Units.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        }, 1000)
        this.getWeatherAPI();
    }

    getWeatherAPI() {
        let city = '北京';
        var api = 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        fetchJsonp(api)
            .then((res) => {
                return res.json()
            }).then((json) => {
                const data = json.results[0].weather_data[0]

                this.setState({
                    dayPictureUrl: data.dayPictureUrl,
                    weather: data.weather
                })
            }).catch(function (ex) {
                console.log('parsing failed', ex)
            })
    }
    render() {
        const menuType = this.props.menuType;
        return (
            <div className="header">
                <Row className="header-top">
                    {
                        menuType ?
                            <Col span="6" className="logn">
                                <img src="/assets/logo-ant.svg" alt=""/>
                                <span>Bicycle 通用管理系统</span>
                            </Col>: ''
                    }
                    <Col span={menuType? 18 : 24}>
                        <span>欢迎， {this.state.username}</span>
                        <a href="#">退出</a>
                    </Col>
                </Row>
                {
                    menuType ? '' :
                        <Row className="breadcrumb">
                            <Col span={4} className="breadcrumb-title">
                                首页
                            </Col>
                            <Col span={20} className="weather">
                                <span className="date">{this.state.sysTime}</span>
                                <span className="weather-img">
                                    <img src={this.state.dayPictureUrl} alt="" />
                                </span>
                                <span className="weather-statu">
                                    {this.state.weather}
                                </span>
                            </Col>
                        </Row>
                }

            </div>
        )
    }
}


export default Header